<style lang="less">
  @import "modelManage";
</style>

<template>
  <div class="model">
    <div class="model-search">
      <model-search @modelList="getResult"></model-search>
    </div>
    <div class="model-table">
      <Table border ref="selection" :columns="columns" :data="data"></Table>
      <Modal v-model="modal" title="修改模型" width="300" footer-hide @on-cancel="cancel">
        <Select v-model="state" placeholder="请选择模型状态" style="width: 220px;">
          <Option v-for="item in stateList" :value="item.value" :key="item.value">{{ item.label }}</Option>
        </Select>
        <Button @click="cancel">取消</Button>
        <Button type="primary" @click="changeModel">确认</Button>
      </Modal>
    </div>
  </div>
</template>

<script>
  import ModelSearch from '../../../components/model-search/model-search'
  import Bus from '../../../utils/Bus'
  import {url} from '../../../../config/url'
    export default {
      name: "modelManage",
      components: {
        ModelSearch,
      },
      data(){
        return{
          modelId:null,
          modal:false,
          state:null,
          stateList: [
            {
              value:1,
              label: '未发布'
            },
            {
              value: 2,
              label: '审核中'
            },
            {
              value: 3,
              label: '已发布'
            }
          ],
          columns: [
            {
              type: 'selection',
              width: 60,
              align: 'center'
            },
            { title:'ID',
              key:'id',
              width:90
            },
            {
              title: '模型名',
              key: 'name',
            },
            {
              title:'模型描述',
              key:'description'
            },
            {
              title: '创建者',
              key: 'creator'
            },
            {
              title:'类型',
              key:'type',
              width:120
            },
            {
              title:'状态',
              key:'state',
              width:120
            },
            {
              title: '操作',
              key: 'handle',
              width:220,
              render: (h, params) => {
                return h('div', [
                  //评估模型
                  h('Button',{
                    props:{
                      icon:'ios-checkbox-outline'
                    },
                    on:{
                      click:()=>{
                        this.evaluateModel(params.index)
                      }
                    }
                  }),
                  //修改模型状态
                  h('Button', {
                    props: {
                      icon:'md-refresh'
                    },
                    on: {
                      click: () => {
                        this.change(params.index)
                      }
                    }
                  }),
                  //下载模型
                  h('Button',{
                    props:{
                      icon:'ios-download-outline'
                    },
                    on:{
                      click:()=>{
                        this.downModel(params.index)
                      }
                    }
                  }),
                  //删除模型
                  h('Button', {
                    props: {
                      icon:'ios-trash-outline'
                    },
                    on: {
                      click: () => {
                        this.remove(params.index)
                      }
                    }
                  })
                ]);
              }
            }
          ],
          data: [

          ]
        }
      },
      methods:{
        //获取查询模型的结果
        getResult(data){
          this.data=data;
          let size=this.data.length;
          for(let i=0;i<size;i++){
            if(data[i].type===1){
              this.data[i].type='图像分类'
            } else{
              this.data[i].type='图像检索'
            }
            if(data[i].state===1){
              this.data[i].state='未发布'
            }
            else if(data[i].state===2){
              this.data[i].state='审核中'
            }else{
              this.data[i].state='已发布'
            }
          }
        },

        evaluateModel(index){
          //评估模型
          Bus.$emit('modelName',this.data[index].name);
          this.$router.push('/algorithm/evaluateModel')
        },

        //修改模型状态，获取需要修改的模型的ID
        change (index) {
          this.modelId=this.data[index].id;
          this.modal=true
        },

        //修改模型，发送需要修改的模型的状态和ID
        changeModel(){
          if(this.modelId!==null&&this.state!==null){
            this.$axios.put(url+'/model',{
              'id':this.modelId,
              'status':this.state
            },{
              headers:{
                'Content-Type':'application/json'
              }
            }).then(res=>{
              if(res.data.error_code==0){
                alert("修改模型状态成功");
                this.modelId=null;
                this.state=null;
                this.modal=false
              }else{
                alert("修改模型状态失败："+res.data.error_code)
              }
            })
          }else {
            alert("条件不全，请补全条件");
            this.modal=true
          }
        },
        cancel () {
          this.$Message.info('取消修改模型');
          this.modal=false
        },

        //删除模型
        remove (index) {
          let id=JSON.stringify([this.data[index].id]);
          this.$axios.delete(url+'/model',{
            params:{
              'data':id
            }
          }).then(res=>{
            if(res.data.error_code===0){
              this.data.splice(index, 1);
              alert("删除模型成功")
            }
            else{
              alert("删除模型失败")
            }
          })
        },
        downModel(index){
          //下载模型
          alert("下载模型"+this.data[index].name)
        },
      }
    }
</script>

<style scoped>

</style>
